<!-- 用户登录界面 -->
<template>
  <div id='login' v-loading='loading' element-loading-background="rgba(0, 0, 0, 0.8)" element-loading-text="登录中"
       element-loading-spinner="el-icon-loading">
    <!--    <div class="bg"></div>-->
    <el-row class='main-container'>
      <el-col :lg='8' :xs='16' :md='10' :span='10'>
        <div class='top'>
          <!--          <i class="iconfont icon-kaoshi"></i><span class="title">在线考试系统</span>-->
        </div>
        <div class='bottom'>
          <div class='container'>
            <p class='title'>账号登录</p>
            <el-form :label-position='labelPosition' label-width='80px' :model='formLabelAlign'>
              <el-form-item label='用户名'>
                <el-input class='input' v-model.number='formLabelAlign.username' placeholder='请输入用户名'></el-input>
              </el-form-item>
              <el-form-item label='密码'>
                <el-input class='input' v-model='formLabelAlign.password' placeholder='请输入密码' type='password'></el-input>
              </el-form-item>
              <div class='submit'>
                <el-button type='primary' class='row-login' @click='login()'>登录</el-button>
              </div>
              <!-- <div class="options">
                <p class="find"><a href="javascript:;">找回密码</a></p>
                <div class="register">
                  <span>没有账号?</span>
                  <span><a href="javascript:;">去注册</a></span>
                </div>
              </div> -->
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
<!--    青少年模式-->
    <el-dialog
      :visible.sync="dialogVisible"
      width="240px"
      center
      :show-close='false'
      top='25vh'>
      <div style='text-align: center'>
        <el-row>为呵护未成年人健康成长推出儿童/青少年模式。该模式下部分功能无法正常使用请监护人主动选择。</el-row>
        <br>
        <a @click='clickk' style='color: #0195ff;font-size: 12px;cursor: pointer'>进入儿童/青少年模式></a>
      </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">我知道了</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import store from '@/vuex/store'
import { mapState } from 'vuex'

export default {
  store,
  name: 'login',
  data() {
    return {
      role: 2,
      labelPosition: 'left',
      formLabelAlign: {
        username: '9999',
        password: '123456'
      },
      loading: false,
      dialogVisible: true
    }
  },
  methods: {
    //用户登录请求后台处理
    login() {
      console.log('登录操作执行-------')
      this.loading = true
      setTimeout( () => {
        this.loading = false
        this.$axios({
          url: `/api/login`,
          method: 'post',
          data: {
            ...this.formLabelAlign
          }
        }).then(res => {
          // console.log(res)
          this.$message.success('登录成功！')
          let resData = res.data.data
          if (resData != null) {
            switch (resData.role) {
              case '0':  //管理员
                this.$cookies.set('cname', resData.adminName)
                this.$cookies.set('cid', resData.adminId)
                this.$cookies.set('role', 0)
                this.$router.replace({ path: '/index' }) //跳转到首页
                break
              case '1': //教师
                this.$cookies.set('cname', resData.teacherName)
                this.$cookies.set('cid', resData.teacherId)
                this.$cookies.set('role', 1)
                this.$router.push({ path: '/index' }) //跳转到教师用户
                break
              case '2': //学生
                this.$cookies.set('cname', resData.studentName)
                this.$cookies.set('cid', resData.studentId)
                this.$router.push({ path: '/student' })
                break
            }
          }
        })

        if (resData == null) { //错误提示
          this.$message({
            showClose: true,
            type: 'error',
            message: '用户名或者密码错误'
          })
        }
      },1000)
    },
    clickTag(key) {
      this.role = key
    },
    clickk() {
      this.$message.info('儿童/青少年模式尚未开放')
    }
  },
  computed: mapState(['userInfo']),
  mounted() {

  }
}
</script>

<style lang='scss' scoped>
.remind {
  border-radius: 4px;
  padding: 10px 20px;
  display: flex;
  position: fixed;
  right: 20px;
  bottom: 50%;
  flex-direction: column;
  color: #606266;
  background-color: #fff;
  border-left: 4px solid #409eff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

.container {
  margin-bottom: 32px;
}

.container .el-radio-group {
  margin: 30px 0px;
}

a:link {
  color: #ff962a;
  text-decoration: none;
}

#login {
  font-size: 14px;
  height: 100%;
  color: #000;
  //background-image: linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%);
}


#login .main-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

#login .main-container .top {
  margin-top: 100px;
  font-size: 30px;
  color: #ff962a;
  display: flex;
  justify-content: center;
}

#login .top .icon-kaoshi {
  font-size: 80px;
}

#login .top .title {
  margin-top: 20px;
}

#login .bottom {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  //background-color: #fff;
  border-radius: 20px;
  border: 1px solid #000000;
  //box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}

#login .bottom .title {
  text-align: center;
  font-size: 30px;
}

.bottom .container .title {
  margin: 30px 0px;;
}

.bottom .submit .row-login {
  width: 100%;
  background: none;
  color: #000000;
  border-color: #04468b;
  margin: 20px 0px 10px 0px;
  padding: 15px 20px;
}

.bottom .submit {
  display: flex;
  justify-content: center;
}

.footer {
  margin-top: 50px;
  text-align: center;
}

.footer .msg1 {
  font-size: 18px;
  color: #fff;
  margin-bottom: 15px;
}

.footer .msg2 {
  font-size: 14px;
  color: #e3e3e3;
  margin-top: 70px;
}

.bottom .options {
  margin-bottom: 40px;
  color: #ff962a;
  display: flex;
  justify-content: space-between;
}

.bottom .options > a {
  color: #ff962a;
}

.bottom .options .register span:nth-child(1) {
  color: #8C8C8C;
}

.input >>> input {
  background: none;
  border: 1px solid #000000;
}

</style>
